/* Copyright (c) 2010, Oracle and/or its affiliates. All rights reserved. */

/*
 * Styles common for Windows Mobile IE (WM) and BlackBerry (BB) versions 4.6+. WM 
 * and BB are in different sizes, and they offer a different level of CSS 
 * support, so we will override a few styles exclusively for BB and WM
 * following these common styles.
 */
@agent ie,  blackberry and (min-version:4.6) {
  /*
   * Sets the style for a page's body element.
   */
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: Helvetica  !important;
    background: rgb(206,219,235);
    color: #000000;
  }

  /*
   * Sets the style for a page's form element.
   */
  form {
    width: 100%;
    padding: 0;
    margin: 0px;
  }

  /*
   * Classes below applies to the following components:
   * active Prev/Next link of table
   * goLink and commandLink
   * breadCrumbs
   * panelTabbed
   * links of a navigationPane
   */
  .OraNavBarActiveLink,
  .OraLink,
  af|breadCrumbs::step,
  af|panelTabbed::tab  a,
  af|panelTabbed::tab-selected  a,
  af|navigationPane::bar-content a, 
  af|navigationPane::buttons-content a, 
  af|navigationPane::list-content a {
    color: rgb(0,52,154);
  }

  /*
   * .OraLink:active applies to goLink and commandLink if the link is active
   * af|panelTabbed::tab-selected applies to a selected panelTabbed
   */
  .OraLink:active, 
  af|panelTabbed::tab-selected  a{
    font-weight: bold;
  }

  /* 
   * Class below applies to an inactive Next/Previous link in a table 
   */
  .OraNavBarInactiveLink {
    font-weight: normal;
    color: #999999;
  }

  /*
   * Class 'af_m_banner' applies to a banner of your application. A banner means  
   * your application's logo and a standard set of links which remain constant at 
   * the top across all your webpages. 
   */
  .af_m_banner{
    margin: 0px;
    padding: 0px;
    width:100%;
    background: #FFFFFF;
  }

  /*
   * Class 'af_m_bannerLink' applies to a link in your application's banner. 
   */
  .af_m_bannerLink {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    text-align: center;
    color: rgb(0,52,154); 
    background: transparent;
  }

  /* 
   * Class 'af_m_panelBase' sets the padding. This class can applied to  
   * panelGroupLayout component which will apply the padding to its children.
   */
  .af_m_panelBase {
     padding: 10px;
  }

  /* 
   * Class below applies to a table component's pagination-controller.  
   */   
  af|table::control-bar-top {
    background-color: #FFFFFF; 
    border: none;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
  }

  /* 
   * Class below applies to a table-component's content.  
   */
  af|table::content{
    border-collapse: collapse; 
    border-color: none;
    border-style: none;
    background: #FFFFFF;
  }

  /* 
   * Class below applies to each cell of a table component.  
   */
  af|column::cell-text {
    border-bottom: 1px solid #E0E0E0 !important;
    background: #FFFFFF; 
    padding: 4px 5px;
    font-size: 12px;
    font-weight: normal;
    list-style: none;
    text-align:left;
    vertical-align: middle;
  }


  af|column::cell-text a img {
    color: #FFFFFF;
  }

  /*
   * Class below is applied to the detail facet of a table component
   */
  af|table::detail {
    border-bottom: 1px solid #E0E0E0 !important;
  }

  /* 
   * Classes below removes border from a table's cell
   */
   af|table::content tr td,
  .OraTableBorder0001,
  .OraTableBorder0101,
  .OraTableBorder1101, 
  .OraTableBorder1001,
  .OraTableBorder1111 {
    border: none;
  }

  /* 
   * Class below applies to a panelFormLayout 
   */
  af|panelFormLayout {
     background: #FFFFFF;
  }

  /*
   * Since only one column is rendered for panelFormLayout in the case of mobile 
   * browsers, this style enables that column to have a maximum width.
   */
  af|panelFormLayout::column {
    width: 100%;
  }

  /* 
   * Class below applies to the label cell of a panelFormLayout component.
   */
  af|panelFormLayout::label-cell {
    font-weight: bold;
    padding-top: 4px;
    padding-bottom: 4px;
    font-weight: bold;
    color: rgb(112,74,0);
    text-align: right;
  }

  /* 
   * Class below applies to the content cell of a panelFormLayout component.
   */
  af|panelFormLayout::content-cell {
    color: #000000;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 2px;
    text-align: left;
    text-decoration: inherit;
    vertical-align: middle;
    white-space:normal;
  }

  /* 
   * Class below applies to a caption group.
   */
  af|panelCaptionGroup {
    border-style: none;
    background: #FFFFFF;
  }

  /* 
   * Class below applies to caption text.
   */
  af|panelCaptionGroup::caption { 
    color: black;  
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 3px;
  }

  /* 
   * Class below applies to the parent element of each showDetailItem in
   * a panelAccordion.
   */
  af|panelAccordion::content {
    background: #FFFFFF;
    width: 100%;
  }

  /* 
   * Class below applies to the link element for the title of each enabled 
   * showDetailItem in a panelAccordion.
   */
  af|panelAccordion::title-link {
    color: rgb(0,52,154);
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
  }

  /* 
   * Class below applies to showDetail links.
   */
  af|showDetail::prompt-link,
  af|showDetail::disclosure-icon-link {
    text-decoration: none;
  }

  /*
   * Expression below applies for a panelList component.
   */
  af|panelList ul {
    background: #FFFFFF;
    margin: 0;
    padding: 0;
    border-top:1px solid #E0E0E0;
  }

  af|panelList ul  li {
    margin: 0;
    border-bottom:1px solid #E0E0E0;
    padding:8px 0 8px 10px ;
    list-style: none;
  }

  /*
   * This style is applicable to all links in a panelList. 
   */
  af|panelList ul  li  a {
    display: block ;
    text-decoration: none;
    color: rgb(0,52,154);
    background: url(/images/listarrow.png) no-repeat right center;
    font-size: 13px;
    font-weight: bold;
  }

  /*
   * Class below applies to a commandButton
   */
  af|commandButton {
    background: rgb(231,231,231);
    white-space: nowrap;
  }

  /*
   * Class below can be applied to a commandButton with an icon. 
   */
  .af_m_picButton {
    border: none;
    background: transparent;
  }

  /*
   * Classes below sets the background for a navigationPane component.
   * af|navigationPane applies for hint values 'button' and 'list' 
   */
  af|navigationPane,
  af|navigationPane::tabs,
  af|navigationPane::bar {
    background: #FFFFFF;
  }

  /*
   * Class below applicable for a navigationPane component with hint as 'list'
   */
  af|navigationPane::list-bullet {
   font-weight: normal;
   font-size: x-small;
   vertical-align: middle;
   width: 17px;
   background-image: url(/images/list-bullet.gif);
   background-position: center;
   background-repeat: no-repeat
  }

  /* 
   * Classes below is same as the above class af_m_listingLink except it doesn't 
   * provide a background image.
   */
  .af_m_listingLink_noImage {
    display: block;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    padding-top: 4px;
    color: rgb(0,52,154);
  }

  /* 
   * Class below can be applied to a commandLink if no detail needs to be 
   * display below it.
   */
  .af_m_commandLink {
    display: block;
    text-decoration: none;
    color: rgb(0,52,154);
    padding-right: 25px;
    font-size: 13px;
    font-weight: bold;
    background: url(/images/listarrow.png) no-repeat right center;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 85%;
  }

  /* 
   * Class below can be applied to an outputText component which displays details 
   * related to a commandLink component that is rendered above the outputText. 
   */
  .af_m_listingDetails {
    text-align: left;
    font-size: 11px;
    font-weight: normal;
    color: #666666;
    text-decoration: none;
  }

  /* 
   * Class below can be applied to an outputText component if it needs to display 
   * the data in bold. 
   */
  .af_m_listingPrimaryDetails{
    text-align: left;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
  }

  /*
   * Class below can be used against a table component to have a fixed layout.
   */
  .af_m_fixedLayout {
    table-layout: fixed;
    word-wrap: break-word; 
  }

  /*
   * Class below can be applied to an outputText if it display a heading 
   */
  .af_m_heading{
    font-size: 14px;
    font-weight: bold;
  }

  /* 
   * A table with "rowSelection" attribute as "single"/"multiple" renders a 
   * "Select" column with radio buttons/checkboxes. The class below applies to
   * the "Select" column.
   */ 
  af|tableSelectOne::cell-icon-format,
  af|tableSelectMany::cell-icon-format {
     border-bottom: 1px solid #E0E0E0 !important;
     text-align: center;
     background-color: #FFFFFF;
  }


  /*
   * Expression below applies to a panelFormLayout's column if it is a child of
   * a table's detailStamp facet
   */
  af|table::detail af|panelFormLayout::column {
    width: auto;
  }

  /* 
   * Expression below applies to panelFormLayout's label if it is a child of a  
   * table's detailStamp facet
   */
  af|table::detail af|panelFormLayout::label-cell {
    font-size: 12px;
    font-weight: normal;
    padding: 2px;
    color: black;
    text-align: left;
  }

  /* 
   * Expression below applies to panelFormLayout's field if it is a child of a  
   * table's detailStamp facet
   */
  af|table::detail af|panelFormLayout::content-cell {
    font-size: 12px;
    font-weight: normal;
    padding: 2px 2px 2px 0px;
    color: black;
    text-align: left;
  }
}

/*
 * Styles exclusively for for WindowsMobile IE only. 
 */ 
@agent ie{
  .OraNavBarActiveLink,
  .OraNavBarInactiveLink,
  .OraLink,
  af|breadCrumbs::step,
  af|panelTabbed::tab  a,
  af|panelTabbed::tab-selected  a,
  af|navigationPane::bar-content a, 
  af|navigationPane::buttons-content a, 
  af|navigationPane::list-content a {
    font-size: 11px;
  }

  .OraNavBarActiveLink {
    font-weight: normal;
  }

  .OraNavBarInactiveLink {
    padding-left: 3px;
  }

  .af_m_banner{
    height: 25px;
  }

  .af_m_bannerLink{
    font-size: 9px;
  }

  /* 
   * Class 'af_m_toolbar' is applicable to a panelHeader component which can    
   * display a page's title. Title is entered in the panelHeader's text attribute. 
   */
  .af_m_toolbar {
    border-bottom: 1px solid #2d3642 ;
    padding: 5px ;
    margin: 0px;
    background:rgb(140,151,180) repeat-x;
    text-align: left;
    height: 40px;
  }

  /* 
   * This expression applies to a page's title.  
   */
  .af_m_toolbar  h1 {
    margin: 0px;
    height: 25px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #FFFFFF;
    border-bottom: none;
    padding-bottom: 5px;
  }

  /* 
   * Class 'af_m_backButton' is applicable to a commandLink component which 
   * will be displayed to the left side of a page's title. This commandLink  
   * performs cancel operations and can be used to navigate back to the previous 
   * page
   */
  .af_m_backButton {
    text-align: right;
    padding:3px 26px 3px 29px;
    vertical-align: top;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    background-position: center top; 
    background-repeat: no-repeat;
    background-image: url(/images/wm-backbutton.png);
    white-space: nowrap;
  }

  /* 
   * Class 'af_m_button' is applicable to a commandLink component which will  
   * be displayed to the right side of a page's title. This commandLink completes   
   * a transaction initiated in the page. 
   */
  .af_m_button {
    text-align: right;
    padding:3px 27px 3px 27px;
    vertical-align: top;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    background-position: center top; 
    background-repeat: no-repeat;
    background-image: url(/images/wm-toolbutton.png);
    white-space: nowrap;
  }

  af|table::control-bar-top {
    padding: 0px 2px;  
  }

  af|table::content tr th {
    background-color: #EEEEEE;
    color: rgb(112,74,0);
    font-size: 13px;
    padding: 0px 5px;
    text-align:left;
    border: none;
    border-left:1px solid #E0E0E0

  }

  af|panelFormLayout::label-cell {
    font-size: 12px;
  }

  af|panelFormLayout::content-cell {
    font-size: 13px;
  }

  af|panelFormLayout::content-cell * {
    font-size: 13px;
  }

  af|panelCaptionGroup {
     padding: 2px;
  }

  af|panelAccordion::title-link {
    font-size: 13px;
  }

  af|panelList ul  li  a {
    font-size: 13px;

  }

  /*
   * Class below applies to a commandButton
   */
  af|commandButton {
    font-size: 11px;
  }

  /*
   * Classes below sets the font size for a navigationPane component.
   */
  af|navigationPane::bar-content,
  af|navigationPane::buttons-content,
  af|navigationPane::list-content,
  af|navigationPane::choice-options {
     font-size: 11px;
  }

  /* 
   * Class below can be applied to a commandLink/goLink if the commandLink 
   * needs to display some detail below it. These details can be displayed using 
   * an outputText. The commandLink and this outputText can be rendered vertically 
   * using panelGroupLayout (Attr: layout = 'vertical')
   */
  .af_m_listingLink {
    display: block;
    text-decoration: none;
    color: rgb(0,52,154);
    padding-right: 25px;
    font-size: 13px  ;
    font-weight: bold  ;
    padding-top:4px;
    background: url(/images/listarrow.png) no-repeat right center;
    width: 85%;
  }

  /* 
   * Expression below applies to all children of a panelForm's field-cell if it  
   * is a child of a table's detailStamp facet
   */
  af|table::detail af|panelFormLayout::content-cell * {
    font-size: 12px;
  }
}

/*
 * Styles exclusively for BlackBerry (version 4.6+) only.
 */ 
@agent blackberry and (min-version:4.6) {
  .OraNavBarActiveLink,
  .OraNavBarInactiveLink,
  .OraLink,
  af|breadCrumbs::step,
  af|panelTabbed::tab  a,
  af|panelTabbed::tab-selected  a,
  af|navigationPane::bar-content a, 
  af|navigationPane::buttons-content a, 
  af|navigationPane::list-content a {
    font-size: 18px;
  }

  .af_m_bannerLink{
    font-size: 11px;
  }

  /* 
   * Class 'af_m_toolbar' is applicable to a panelHeader component which can    
   * display a page's title. Title is entered in the panelHeader's text attribute. 
   */
  .af_m_toolbar {
    padding: 10px;
    height: 28px;
    background: url(/images/toolbar.png) rgb(206,219,235) repeat-x;
    text-align: right;
  }

  /* 
   * This expression applies to a page's title.  
   */
  .af_m_toolbar > h1 {
    position: absolute;
    overflow: hidden;
    left: 50%;
    margin: 0px 0 0 -96px;
    height: 28px;
    font-size: 22px;
    width: 192px;
    font-weight: bold;
    text-align: center;
    text-overflow: hidden;
    white-space: nowrap;
    color: #FFFFFF !important;
    border-bottom: none;
  }

  /* 
   * Class 'af_m_backButton' is applicable to a commandLink component which 
   * will be displayed to the left side of a page's title. This commandLink  
   * performs cancel operations and can be used to navigate back to the previous 
   * page
   */
  .af_m_toolbar .af_m_backButton {
     position: absolute;
     left: 10px;
     text-align: center;
     vertical-align: middle;
     text-decoration: none;
     padding:5px 2px 5px 2px;
     width: 60px;
     height: 25px;
     overflow: hidden;
     border-width: 0px;
     font-size: 13px;
     font-weight: bold;
     color: #FFFFFF;
     background: url(/images/backbutton.png) no-repeat transparent;
     white-space: nowrap;
  }

  /* 
   * Class 'af_m_button' is applicable to a commandLink component which will  
   * be displayed to the right side of a page's title. This commandLink completes   
   * a transaction initiated in the page. 
   */
  .af_m_toolbar .af_m_button {
    position: absolute;
    right: 10px;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    padding: 5px 0px;
    width: 70px;
    height: 25px;
    overflow: hidden;
    border-width: 0px;
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
    background: url(/images/toolbutton.png) no-repeat transparent;
    white-space: nowrap;
  }

  af|table::control-bar-top {
    padding-left: 10px;
    font-size: 13px;
  }

  af|table::content tr th{ 
    background-color:#EEEEEE;
    color: rgb(112,74,0);
    font-size: 18px;
    padding-right: 2px;
    padding-left: 10px;
    text-align: left;
    border: none;
    border-left: 1px solid #E0E0E0;
  }

  af|column::cell-text {
    padding-left: 10px;
    font-size: 18px;
  }

  af|panelFormLayout::label-cell {
    font-size: 18px;
  }

  af|panelFormLayout::content-cell {
    font-size: 18px;
  }

  af|panelFormLayout::content-cell * {
    font-size: 18px;
  }

  af|panelAccordion::title-link {
    font-size: 18px;
  }

  af|panelList ul > li  a {
    font-size: 20px;
  }

  af|navigationPane::bar-content,
  af|navigationPane::buttons-content,
  af|navigationPane::list-content,
  af|navigationPane::choice-options {
     font-size: 13px;
  }

  .af_m_listingLink {
    display: block;
    text-decoration: none;
    color: rgb(0,52,154);
    padding-right: 30px;
    font-size: 20px;
    font-weight: bold;
    padding-top: 4px;
    background: url(/images/listarrow.png) no-repeat right bottom;
  }

  .af_m_listingLink_noImage,
  .af_m_commandLink,
  .af_m_listingPrimaryDetails{
   font-size: 20px;
  }

  .af_m_commandLink{
   padding-right: 30px;
  }

  .af_m_listingDetails {
   font-size: 15px;
  }

  .af_m_heading {
    font-size: 16px;
  }

  af|table::detail af|panelFormLayout::label-cell {
    padding-left: 8px;
  }

  af|table::detail af|panelFormLayout::content-cell {
    font-size: 14px;
  }

  af|table::detail af|panelFormLayout::content-cell * {
    font-size: 14px;
  }

  af|commandButton {
    background: rgb(231,231,231);
    font-size: 20px;
    white-space: nowrap;
  }
}

/*
 * Styles for basic HTML browsers including BlackBerry (versions < 4.6)
 */
@agent blackberry and (max-version:4.5), genericpda {
  /*
  * Sets the style for a page's body element.
  */
  body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: Helvetica;
  background: rgb(206,219,235);
  color: #000000;
  }

  /*
  * Sets the style for a page's form element.
  */
  form {
  width: 100%;
  padding: 0;
  margin: 0px;
  }

  /* 
  * Classes below applies to the following components: 
  * active Next/Previous in table
  * commandButton
  * panelTabbed
  * links in breadCrumbs
  * panelAccordion Link
  */
  .OraNavBarActiveLink,
  af|commandButton,
  af|panelTabbed::tab,
  af|breadCrumbs::step,
  .af_panelAccordion_title-link {
  background: rgb(231,231,231);
  font-size: 12px;
  }

  /* 
  * Classes below applies to a selected showDetailItem
  */
  af|showDetailItem::selected {
  font-size:12px;
  background:rgb(231,231,231);
  font-weight:bold;
  }

  /*
  * Class 'af_m_banner' applies to a banner of your application. A banner means  
  * your application's logo and a standard set of links which remain constant at 
  * the top across all your webpages. 
  */
  .af_m_banner{
  margin: 0px;
  padding: 0px;
  width: 100%;
  background: #FFFFFF;
  }

  /*
  * Class 'af_m_bannerLink' applies to a link in your application's banner. 
  */
  .af_m_bannerLink {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
  font-size: 11px;
  text-align: center;
  color: blue;
  background: transparent;
  }

  /* 
  * This expression applies to a page's title.  
  */
  .af_m_toolbar  h1 {
  margin: 0px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #FFFFFF;
  padding-bottom: 3px;
  }

  /* 
  * Class 'af_m_backButton' is applicable to a commandLink component which 
  * will be displayed to the left side of a page's title. This commandLink  
  * performs cancel operations and can be used to navigate back to the previous 
  * page
  */
  .af_m_backButton {
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  }

  /* 
  * Class 'af_m_button' is applicable to a commandLink component which will  
  * be displayed to the right side of a page's title. This commandLink completes   
  * a transaction initiated in the page. 
  */
  .af_m_button {
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  }

  /* 
  * Class 'af_m_panelBase' sets the padding. This class can applied to  
  * panelGroupLayout component which will apply the padding to its children.
  */
  .af_m_panelBase {
   padding: 7px;
  }

  /* 
  * Class below applies to a table component's pagination-controller.  
  */   
  af|table::control-bar-top {
  background-color: #FFFFFF; 
  border: none;
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
  padding-left: 5px;
  width: 100%;
  font-size: 15px; 
  }

  /* 
  * Classes below removes border of a table component.  
  */
  af|table::content tr th:first-child,
  .OraTableBorder0001,
  .OraTableBorder0101,
  .OraTableBorder1101, 
  .OraTableBorder1001,
  .OraTableBorder1111 {
  border: none;
  }

  /* 
  * Class below applies to a table-component's content.  
  */
  af|table::content{
  border-color: none;
  border-style: none;
  background: #FFFFFF;
  }

  /* 
  * Class below applies to a panelFormLayout 
  */
  af|panelFormLayout {
   background: #FFFFFF;
  }

  /*
  * Since only one column is rendered for panelFormLayout in the case of mobile 
  * browsers, this style enables that column to have a maximum width.
  */
  af|panelFormLayout::column {
  width: 100%;
  }

  /* 
  * Class below applies to the parent element of each showDetailItem in
  * a panelAccordion.
  */
  af|panelAccordion::content {
  background: #FFFFFF;
  width: 100%;
  }

  /* 
  * This style applies to caption group.
  */
  af|panelCaptionGroup {
  border-style: none;
  background: #FFFFFF;
  }

  /* 
  * Class below applies to caption text.
  */
  af|panelCaptionGroup::caption { 
  color: black;  
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 3px;
  text-align: center;
  }

  /*
  * Expression below applies to a panelList component.
  */
  af|panelList ul {
  background: #FFFFFF;
  margin: 0;
  padding: 0;
  border-top: 1px solid #E0E0E0;
  }

  af|panelList ul  li {
  margin: 0;
  border-bottom: 1px solid #E0E0E0;
  padding: 4px 0 4px 5px ;
  list-style: none;
  font-size: 12px;
  }

  /*
  * Classes below sets the background for a navigationPane component.
  * af|navigationPane applies for hint values 'button' and 'list' 
  */
  af|navigationPane,
  af|navigationPane::tabs,
  af|navigationPane::bar {
  background: #FFFFFF;
  }

  /*
  * Classes below sets the font size for a navigationPane component.
  */
  af|navigationPane::bar-content,
  af|navigationPane::buttons-content,
  af|navigationPane::list-content,
  af|navigationPane::choice-options {
  font-size: 12px;
  }

  /* 
  * Classes below can be applied to a commandLink 
  */
  .af_m_commandLink,
  .af_m_listingLink,
  .af_m_listingLink_noImage {
  display: block;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  background:rgb(231,231,231);
  }

  /* 
  * Class below can be applied to an outputText component which displays details 
  * related to a commandLink component that is rendered above the outputText. 
  */
  .af_m_listingDetails {
  text-align: left;
  font-size: 12px;
  font-weight: normal;
  color: #666666;
  text-decoration: none;
  }

  /* 
  * Class below can be applied to an outputText component if it needs to display 
  * data in bold. 
  */
  .af_m_listingPrimaryDetails{
  text-align: left;
  font-size: 16px;
  font-weight: normal;
  text-decoration: none;
  }

  /*
  * Class below can be used against a table component to have a fixed layout.
  */
  .af_m_fixedLayout {
  table-layout: fixed;
  word-wrap: break-word; 
  }

  /*
  * Class below can be applied to a commandButton with an icon. 
  */
  .af_m_picButton {
  border: none;
  background: transparent
  }

  /* 
  * Class below can be applied to an outputText component 
  */
  .af_m_detail{
  text-align: left;
  font-size: 16px;
  font-weight: normal;
  text-decoration: none;
  }

  /*
  * Class below can be applied to an outputText if it display a heading 
  */
  .af_m_heading{
  font-size: 16px;
  font-weight: bold;
  }

  /* 
  * A table with "rowSelection" attribute as "single" renders a "Select" column 
  * with radio buttons. The class below applies to the "Select" column.
  */ 
  af|tableSelectOne::cell-icon-format {
   text-align: center;
   background-color: rgb(240,240,240);
  }
}

/*
 * Styles exclusively for BlackBerry (version < 4.6)
 */
@agent blackberry and (max-version:4.5) {  
  /* 
   * Class 'af_m_toolbar' is applicable to a panelHeader component which can    
   * display a page's title. Title is entered in the panelHeader's text attribute. 
   */
  .af_m_toolbar {
    border-bottom: 1px solid #2d3642;
    padding: 8px;
    margin: 0px;
    background: url(/images/toolbar.png) #6d84a2 repeat-x ;
  }

  /* 
  * Classes below removes border from a table's cell
  */
  af|table::content tr th:first-child {
    border: none;
  }  

  /* 
   * Class below applies to the column header of a table component.  
   */
  af|table::content tr th {
    background-color: #E9E8E8;
    color: rgb(112,74,0);
    font-size: 15px;
    padding: 0px 5px;
    border: none;
    text-align: left;
    border: none;
    border-left:1px solid #E0E0E0;
  }


  /* 
  * Class below applies to each cell of a table component.  
  */
  af|column::cell-text {
  background-color: #FFFFFF;
  padding: 3px 5px;
  font-size: 12px;
  font-weight: normal;
  list-style: none;
  text-align: left;
  vertical-align: middle;
  height: 14px;
  }

  /* 
  * Class below applies to the label cell of a panelFormLayout component.
  */
  af|panelFormLayout::label-cell {
  font-size: 13px;
  font-weight: bold;
  padding-top: 4px;
  padding-bottom: 4px;
  font-weight: bold;
  color: rgb(112,74,0);
  text-align: right;
  width: 35%;
  }

  /* 
  * Class below applies to the content cell of a panelFormLayout component.
  */
  af|panelFormLayout::content-cell {
  font-size: 14px;
  color: #000000;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 2px;
  text-align: left;
  text-decoration: inherit;
  vertical-align: middle;
  width: 65%;
  white-space:normal;
  }

  /* 
  * Expression below applies to all children of a panelForm's content-cell 
  */
  af|panelFormLayout::content-cell * {
  font-size: 14px;
  }

  }

  /*
  * Styles for all basic html-browsers
  */
  @agent genericpda {
  /*
   * Class 'af_m_bannerLink' applies to a link in your application's banner. 
   */
  .af_m_bannerLink {
    font-size: 8px;
  }

  /* 
   * Class 'af_m_toolbar' is applicable to a panelHeader component which can    
   * display a page's title. Title is entered in the panelHeader's text attribute. 
   */
  .af_m_toolbar {
    border-bottom: 1px solid #2d3642;
    margin:0px;
    background: url(/images/bhtml_toolbar.png) #6d84a2 repeat-x;
    text-align: left;
  }

  /* 
   * This expression applies to a page's title.  
   */
  .af_m_toolbar  h1 {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: #FFFFFF;
    border-bottom: none;
  }

  .af_m_backButton, 
  .af_m_button {
    background: rgb(231,231,231);
  }

  /* 
   * Class 'af_m_panelBase' sets the padding. This class can applied to  
   * panelGroupLayout component which will apply the padding to its children.
   */
  .af_m_panelBase {
     padding: 5px;
  }

  /* 
   * Class below applies to a table component's pagination-controller.  
   */    
  af|table::control-bar-top {
    padding-left: 4px;
    font-size: 12px;
  }

  /* 
   * Class below applies to the column header of a table component.  
   */
  af|table::content tr th {
    font-size: 12px;
    padding: 0px 0px;
    padding-left: 4px;
    padding-right: 2px;
  }

  /* 
   * Class below applies to each cell of a table component.  
   */
  af|column::cell-text {
    background: #FFFFFF; 
    padding: 3px 2px 3px 4px;
    font-size: 10px;
    font-weight: normal;
    list-style: none;
    text-align:left;
    vertical-align: middle;
    border-bottom: 1px solid #E0E0E0;
  }

  /* 
   * Class below applies to the label cell of a panelFormLayout component.
   */
  af|panelFormLayout::label-stacked-cell {
    font-size: 12px;
    font-weight: bold;
    padding-top: 2px;
    padding-left: 4px;
    padding-bottom: 0px;
    font-weight: bold;
    color: rgb(112,74,0);
  }

  /* 
   * Class below applies to the content cell of a panelFormLayout component.
   */
  af|panelFormLayout::content-cell {
    font-size: 13px;
    color: #000000;
    padding-top: 0px;
    padding-bottom: 2px;
    padding-left: 4px;
    text-align: left;
    text-decoration: inherit;
    white-space:normal;
  }

  /* 
   * Expression below applies to all children of a panelForm's content-cell 
   */
  af|panelFormLayout::content-cell * {
    font-size: 10px;
    color: #000000;
  }

  /* 
   * This style applies to caption group.
   */
  af|panelCaptionGroup {
    padding: 2px;
  }

  /* 
   * Class below applies to caption text.
   */
  af|panelCaptionGroup::caption { 
    font-size: 12px;
    padding-bottom:2px;
  }

  .af_m_listingDetails {
    font-size: 10px;
  }

  .af_m_listingPrimaryDetails {
   font-size: 12px;
  }

  /* 
   * Class below can be applied to an outputText component 
   */
  .af_m_detail {
    text-align: left;
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
  }

  /*
   * Class below can be applied to an outputText if it display a heading 
   */
  .af_m_heading{
    font-size: 14px;
    font-weight: bold;
  }  

  af|tableSelectOne::cell-icon-format {
    border-bottom: 1px solid #E0E0E0 !important;  
  }
}
